<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>
<div id="index" style="margin-left: 190px;margin-right: 147px">
    <h2>最火爆的文章</h2>
    <template>
        <el-table
                ref="multipleTable"
                :data="tableData"
                @selection-change="handleSelectionChange"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    type="selection"
                    align="center"
                    width="52">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="summary"
                    label="副标题"
                    align="center"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="readCount"
                    label="已读数量"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="发布时间"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="最后修改时间"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="编辑"
                    align="center"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-button plain @click="toggleSelection()" icon="el-icon-refresh-left">重新选择</el-button>
            <el-button id="add" plain type="success" style="margin-left: 233px" @click="addArticle()" icon="el-icon-circle-check">发布文章</el-button>
            <el-button id="del" plain type="danger" style="margin-left: 233px" @click="deleteArticle()" icon="el-icon-delete">删除文章</el-button>
            <el-button id="view" plain type="warning" style="margin-left: 233px" @click="overView()" icon="el-icon-view">文章概览</el-button>
        </el-row>
    </template>


    <form id="frm" th:action="@{/view/addArticle}" method="get"></form>
    <form id="delFrm" th:action="@{/article/remove}" method="post">
        <input type="hidden" name="ids" id="ids" value="">
    </form>
 </div>

<script type="text/javascript" th:inline="javascript">
    var articleList = [[${articleList}]];
    new Vue({
        el:"#index",
        data(){
            return{
                tableData: [],
                multipleSelection: []
            }
        },
        mounted() {
          this.loadPost();
        },

        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            handleEdit(index,row) {
                window.location.replace('/blog/article/get?id='+row.id);
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            addArticle(){
                $("#frm").submit();
            },

            deleteArticle(){
                var ids = []
                if(this.multipleSelection.length==0){
                    this.$message({
                        message: '请选择文章',
                        type: 'warning'})
                    return
                }
                for(i=0;i<this.multipleSelection.length;i++){
                    ids.push(this.multipleSelection[i].id)
                }
                $("#ids").val(ids)
                $("#delFrm").submit()
            },

            overView(){
                var ids = []
                if(this.multipleSelection.length!=1){
                    this.$message({
                        message: '请选择一篇文章查看',
                        type: 'warning'})
                    return
                }
                $.get("../article/detail/overView",{id:this.multipleSelection[0].id},(data,status)=>{
                    this.$alert(data, '文章内容概览', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `看完啦，真棒！`,
                                type: 'success'
                            })
                        }
                    })
                })
            },

            loadPost(){
                axios.get(`/blog/article/hot`)
                    .then(res => {
                        if(res.status == 200) {
                            this.tableData=articleList
                        }
                })
            }
        }
    })
</script>
</body>
</html>